<script setup lang="ts">
import TheClock from '@/components/clock/TheClock.vue'
import { onMounted, onUnmounted, ref } from 'vue';

// 生命时间变量
let hour = ref<number>(0)
let minute = ref<number>(0)
let second = ref<number>(0)

// 获取时间函数
const getTime = (): void => {
  const time = new Date()

  // hour.value = fillZero(Number(time.getHours()))
  // minute.value = fillZero(Number(time.getMinutes()))
  // second.value = fillZero(Number(time.getSeconds()))
  hour.value = Number(time.getHours())
  minute.value = Number(time.getMinutes())
  second.value = Number(time.getSeconds())
}

// 补零
// const fillZero = (num: number): string => {
//   if (num > 9) return String(num)
//   return '0' + '' + num
// }

let timer: any = null
onMounted(() => {
  clearInterval(timer)
  getTime()
  timer = setInterval(() => getTime(), 1000)
})

onUnmounted((): void => {
  clearInterval(timer)
})
</script>

<template>
  <main>
    <div class="clock_clockwise">
      <TheClock width="320rem" height="300rem" :time="hour" />
    </div>

    <div class="minute-second_hand">
      <div class="clock_minute_hand">
        <TheClock width="160rem" height="140rem" :time="minute" />
      </div>
      <div class="clock_second_hand">
        <TheClock width="160rem" height="140rem" :time="second" />
      </div>
    </div>

  </main>
</template>

<style lang='scss' scoped>
main {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 100vh;

  .clock_clockwise {
    margin-right: 20rem;

  }

  .minute-second_hand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .clock_minute_hand {
      margin-bottom: 20rem;
    }
  }
}
</style>
